<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=0.5,minimum-scale=0.5,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>自定义捐赠</title>
    <link rel="stylesheet" type="text/css" href="__CSS__api.css" />
    <link rel="stylesheet" type="text/css" href="__CSS__aui.css" />
    <style>
        html, body {
            height: 100%;
            background-color: rgba(0, 0, 0, 0.2);
        }
        .all {
            background-color: #FFFFFF;
            padding-left:30px;
            padding-right:30px;
        }
        .tit{
            padding-top:51px;
            padding-bottom:41px;
            color:#333333;
            font-size:30px;
        }
        .choose{
            width:100%;
        }
        .label{
            display:inline-block;
            width:27%;
            height:68px;
            line-height: 68px;
            text-align:center;
            border-radius:10px;
            margin-bottom:9px;
            color:#E73C5C;
            font-size:30px;
            border:1px solid #E73C5C;
        }
        .label_choose{
            color:#FFFFFF;
            font-size:30px;
            background-color: #E73C5C;

        }
        .label:nth-child(3n+2){
            margin-right:8%;
            margin-left: 8%;
        }
        input[type="tel"] {
            height: 66px;
            line-height: auto;
            background-color: #fff;
            color: #333;
            font-size: 28px;
            border:1px solid #E6E6E6;
            border-radius:6px;
        }

        input::-webkit-input-placeholder {
            color: #CCCCCC;
            font-size: 28px;
        }
        .donate{
            height:66px;
            line-height: 66px;
            text-align:center;
            border-radius:10px;
            color:#FFFFFF;
            font-size:30px;
            background-color: #E73C5C;
            margin-left:22px;
            padding-left:26px;
            padding-right:26px;
        }
        .btn{
            margin-bottom:59px;
        }
    </style>
</head>
<body class="flex-wrap flex-vertical">
<div class="flex-con" tapmode="active" onclick="history.go(-1);"></div>
<div class="all">
    <div class="tit">请选择捐款金额</div>
    <div class="choose" id="one">
        <div class="label" tapmode onclick="select(this)">20元</div>
        <div class="label" tapmode onclick="select(this)">50元</div>
        <div class="label" tapmode onclick="select(this)">100元</div>
    </div>
    <div class="tit">其他金额</div>
    <div class="flex-wrap btn">
        <div class="flex-con">
            <input type="tel" placeholder="最大1000元"/>
        </div>
        <div class="donate" tapmode="active" onclick="fnPay()">捐赠</div>
    </div>
</div>
</body>
<script type="text/javascript" src="__JS__api.js"></script>
<script type="text/javascript" src="__JS__tt.js"></script>
<script type="text/javascript">
    //	单选
    function select(el) {
        // if ($api.hasCls(el, 'label_choose')) {
        //     $api.removeCls(el, 'label_choose');
        // } else {
        //     var domALL = $api.domAll($api.byId("one"), '.label_choose');
        //     if (domALL.length > 0) {
        //         for (var i = 0; i < domALL.length; i++) {
        //             $api.removeCls(domALL[i], 'label_choose');
        //             $api.addCls(el, 'label_choose');
        //
        //         }
        //     } else {
        //         $api.addCls(el, 'label_choose');
        //
        //     }
        // }
    }

    function fnPay() {
        // api.closeFrame();
        // api.openFrame({
        //     name: 'z_pay',
        //     url: './z_pay.html',
        //     bounces: false,
        //     pageParam: {
        //         winNameee: "donation_award_win",
        //         frmNameee: "donation_award_frm",
        //     },
        //     rect: {
        //         x: 0,
        //         y: 0,
        //         w: 'auto',
        //         h: 'auto'
        //     },
        //     animation: {
        //         type: "movein", //动画类型（详见动画类型常量）
        //         subType: "from_bottom", //动画子类型（详见动画子类型常量）
        //         duration: 200 //动画过渡时间，默认300毫秒
        //     }
        // });
    }
</script>
</html>
